<template>
  <div class="login binding">
    <div class="login_header">
      <div class="page-inner head">
        <div class="logo">
          					  <NuxtLink to="/"><img src="@/public/uploadfiles/logo.png" alt=""></NuxtLink>
        </div>
        <span class="f24 font-b">AITEP</span>
      </div>
    </div>
    <div class="page-inner login_inner">
      <div class="wrap">
        <p class="f36 font-b">Binding information</p>
        <div class="login_box">
          <el-form :model="loginForm" :rules="loginRules" ref="ruleFormRef">
            <el-form-item prop="name">
              <p class="font-r f16">User name</p>
              <el-input
                v-model="loginForm.name"
                placeholder="Please enter your name address"
                style="height: 75%"
              />
            </el-form-item>
            <el-form-item prop="Email">
              <p class="font-r f16">Email</p>
              <el-input
                v-model="loginForm.Email"
                placeholder="Please enter your email address"
                style="height: 75%"
              />
            </el-form-item>
            <el-form-item prop="code">
              <p class="font-r f16">Verification Code</p>
              <el-input
                v-model="loginForm.code"
                placeholder="Please enter the verification code"
                style="height: 75%"
              >
                <template #append
                  ><span class="get_code f16 font-r">Get code</span></template
                >
              </el-input>
            </el-form-item>
            <el-form-item>
              <p class="font-r f16">Company verification</p>
              <div class="company">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :auto-upload="false"
                >
                  <template #trigger>
                    <div>
                      <div class="add_w"><img src="/images/add_w.png" /></div>
                      <p>Upload business license</p>
                    </div>
                  </template>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item>
              <el-checkbox
                v-model="loginForm.checkbox"
                size="large"
                label="Agree Ngteco's privacy statement (required)"
              />
            </el-form-item>
            <el-form-item>
              <div class="form_btn f18 font-m">REGISTER</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <p class="copyright font-r f16">
        Copyright © 2024 AITEP All Rights Reserved.<a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=ICP10059378"
          target="_blank"
          rel="noopener noreferrer"
          >Guangdong ICP10059378</a
        >
        Designed by
        <a href="https://www.wanhu.com.cn/" target="_blank">Wanhu</a>.
      </p>
    </div>
    <!-- 弹出框 -->
    <el-dialog v-model="dialogShow">
      <el-form v-model="dialogForm">
        <el-form-item>
          <p class="font-r f16">Company Name</p>
          <el-input
            v-model="dialogForm.name"
            placeholder="Please enter Company Name"
            style="height: 75%"
          />
        </el-form-item>
        <el-form-item>
          <p class="font-r f16">Position</p>
          <el-input
            v-model="dialogForm.name"
            placeholder="Please enter Position"
            style="height: 75%"
          />
        </el-form-item>
        <el-form-item>
          <p class="font-r f16">Company verification</p>
          <div class="company">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :limit="1"
              :on-exceed="handleExceed"
              :auto-upload="false"
            >
              <template #trigger>
                <div>
                  <div class="add_w"><img src="/images/add_w.png" /></div>
                  <p>Upload business license</p>
                </div>
              </template>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="form_btn f18 font-m confirm_btn">CONFIRM</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  <script setup>
const dialogShow = ref(false);
const ruleFormRef = ref(null);
const loginForm = ref({
  name: "",
  Email: "",
  code: "",
  confirm: "",
  checkbox: "",
});
const loginRules = {
  Email: [{ required: true, message: "", trigger: "blur" }],
  name: [{ required: true, message: "", trigger: "blur" }],
  confirm: [{ required: true, message: "", trigger: "blur" }],
  code: [{ required: true, message: "", trigger: "blur" }],
};
</script>
<style scoped>
  
.login{
    height: auto;
    background: url('./images/loginbg.jpg') no-repeat center;
    background-size: cover;
}
.login .login_header{
    flex: 0 0 auto;
    width: 100%;
    background: #fff;
}
.login .login_inner{
    
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 100px 0 30px;
    align-items: center;
    justify-content: space-between;
}
.login .copyright{
    position: static;
    margin-top: 30px;
    transform: none;
    flex: 0 0 auto;
    width: 100%;
}
.login .wrap{
    width: 500px;
    max-width: 100%;
    margin-top: 5%;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
@media(max-width:1024px){
    .login .login_inner{
        padding: 30px 0;
        min-height: calc(100vh - 100px);
    }
    .login .wrap{
        padding: 30px;
        margin-top: 0;
    }
    .login .extras {
display: block;
line-height: 1.8;
}
}
</style>